<script>
// 底图
import MAIN_STORE from "@/store/store.js";
import LAYER_UTIL from "@/utils/layer.js";
let GlobalOverViewMap = null;
export default {
  name: "basemap-controller",
  components: {},
  data() {
    return {
      baseMapArr: [
        {
          loadType: "TileSuperMapRest",
          title: "遥感底图",
          id: "base-yaogan",
          imageUrl: "./images/basemap/basemap-1.jpg",
          url: "http://121.43.60.15:8090/iserver/services/map-ugcv5-pipeline4326/rest/maps/pipeline4326",
          layer: "遥感图",
          style: "default",
          format: "image/png",
          tileMatrixSetID: "default028mm",
        },
        {
          loadType: "Tianditu",
          title: "天地图底图",
          id: "base-tianditu",
          imageUrl: "./images/basemap/basemap-3.jpg",
          key: "1d109683f4d84198e37a38c442d68311",
          layer: "暗色底图",
        },
        {
          loadType: "BaiduMap",
          title: "百度地图底图",
          id: "base-baiduditu",
          imageUrl: "./images/basemap/basemap-4.png",
          url: "https://maponline{num}.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles={styles}&udt=20170408",
          layer: "暗色底图",
        },
        {
          loadType: "GAODE",
          title: "高德地图底图",
          id: "base-gaode",
          imageUrl: "./images/basemap/basemap-6.png",
          url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          layer: "暗色底图",
        },
      ],
      isActive: false,
      basemapMapWidth: 6.5,
      basemapMapGap: 2,
    };
  },
  computed: {
    activeId() {
      return this.$store.state.baseMapActiveId;
    },
    basemapControllerStyle() {
      return {
        "--basemap-total": this.baseMapArr.length,
        "--basemap-map-width": `${this.basemapMapWidth}rem`,
        "--basemap-map-gap": `${this.basemapMapGap}rem`,
        "--basemap-map-itemwidth": `${this.basemapMapWidth + this.basemapMapGap
          }rem`,
      };
    },
  },
  watch: {},
  created() { },
  mounted() {
    const layers = this.baseMapArr.filter((v) => {
      return v.id === this.activeId;
    });
    if (layers.length) {
      setTimeout(() => {
        this.selectMap(layers[0]);
        // this.debugFunc();
      }, 0);
    }
  },
  beforeUnmount() { },
  methods: {
    // 测试方法
    debugFunc() {
      let layer1 = new ol.layer.Tile({
        title: "基本图层:测试",
        source: new ol.source.Tianditu({
          layerType: "img",
          key: "1d109683f4d84198e37a38c442d68311",
        }),
        projection: "EPSG:4326",
      });
      MAIN_STORE.GLOBAL_MAP_INS.addLayer(layer1);
      let layer2 = new ol.layer.Tile({
        title: "基本图层:测试",
        source: new ol.source.XYZ({
          url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          wrapX: false,
          projection: LAYER_UTIL.gcj02Mecator,
        }),
        projection: "EPSG:4326",
      });
      layer2.setOpacity(0.5);
      MAIN_STORE.GLOBAL_MAP_INS.addLayer(layer2);
    },
    selectMap(layer) {
      if (!MAIN_STORE.GLOBAL_MAP_INS) {
        return;
      }
      if (!layer.url && !layer.key) {
        return;
      }
      if (MAIN_STORE.BASE_LAYER_INS) {
        MAIN_STORE.GLOBAL_MAP_INS.removeLayer(MAIN_STORE.BASE_LAYER_INS);
      }
      let source = {};
      switch (layer.loadType) {
        // 超图 rest 瓦片服务
        case "TileSuperMapRest":
          source = new ol.source.TileSuperMapRest({
            crossOrigin: 'anonymous',  // 解决问题关键点: 跨域的设置
            url: layer.url,
            wrapX: false,
          });
          break;
        // 天地图服务
        case "Tianditu":
          source = new ol.source.Tianditu({
            // layerType: "img",
            layerType: "vec",
            // layerType: "ter",
            // layerType: "cva",
            key: layer.key,
          });
          break;
        // 百度地图服务
        case "BaiduMap":
          source = new LAYER_UTIL.BaiduMap_();
          break;
        //  osm
        case "OSM":
          source = new ol.source.OSM();
          break;
        // 高德
        case "GAODE":
          source = new ol.source.XYZ({
            crossOrigin: 'anonymous',
            url: layer.url,
            wrapX: false,
            projection: LAYER_UTIL.gcj02Mecator,
          });
          break;
        default:
          return;
      }
      this.$store.commit("SET_BASE_MAP_ACTIVE_ID", { id: layer.id });
      MAIN_STORE.BASE_LAYER_INS = new ol.layer.Tile({
        id: "basemap",
        title: "基本图层:底图",
        source: source,
        projection: "EPSG:4326",
      });
      const t_ = new ol.layer.Tile({
        id: "overviewmap",
        title: "基本图层:底图",
        source: source,
        projection: "EPSG:4326",
      });
      MAIN_STORE.BASE_LAYER_INS.setZIndex(5);
      // MAIN_STORE.BASE_LAYER_INS.setOpacity(0.2);
      MAIN_STORE.GLOBAL_MAP_INS.addLayer(MAIN_STORE.BASE_LAYER_INS);
      MAIN_STORE.GLOBAL_MAP_INS.removeControl(GlobalOverViewMap);
      GlobalOverViewMap = new ol.control.OverviewMap({
        collapsed: false,
        layers: [t_],
      });
      MAIN_STORE.GLOBAL_MAP_INS.addControl(GlobalOverViewMap);
    },
    singleMapStyle(v, i) {
      return {
        "--basemap-index": i,
        "z-index": i,
      };
    },
  },
};
</script>

<template>
  <div class="basemap-controller" :class="[
    ['Search', 'Decision'].indexOf($route.name) !== -1 ? 'show' : ''
  ]" :style="basemapControllerStyle">
    <div class="single-map normal" :class="[activeId === item.id ? 'active' : '']" :style="singleMapStyle(item, index)"
      v-for="(item, index) in baseMapArr" :key="index" @click="selectMap(item)">
      <div class="image-wrapper">
        <img :src="item.imageUrl" :title="item.title" />
      </div>
      <p>
        {{ item.title }}
      </p>
    </div>
  </div>
</template>
<style lang="less" scoped>
.basemap-controller {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: var(--basemap-map-width);
  height: var(--basemap-map-width);
  transition: width 0.5s;
  display: none;
  pointer-events: all;

  &.show {
    display: flex;
  }

  &>.single-map {
    position: absolute;
    left: 0;
    width: var(--basemap-map-width);
    height: 100%;
    border: 1px solid #2eb8ff;
    border-radius: 5px;
    transition: left 0.5s;
    cursor: pointer;
    overflow: hidden;

    &.normal {
      &.active {
        z-index: 50 !important;
        border: 1px solid rgb(255, 243, 56);

        &>p {
          color: #222;
          background-color: rgba(255, 243, 56, 0.8);
        }
      }

      &>.image-wrapper {
        width: 100%;
        height: 100%;

        &>img {
          width: 100%;
          height: 100%;
        }
      }

      &>p {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        color: #fff;
        font-size: 1rem;
        text-align: center;
        margin: 0;
        transition: all 0.5s;
      }
    }
  }

  &:hover {
    width: calc(var(--basemap-map-itemwidth) * var(--basemap-total) - var(--basemap-map-gap));

    &>.single-map {
      left: calc(var(--basemap-map-itemwidth) * var(--basemap-index));  }
  }
}
</style>
